<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <h3>学习侦听器</h3>
        <input type="text" v-model="key">
        <p>{{key}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
        // 格式：
        // Vue({
        //     // .....
        //     watch: {
        //           属性名: 就是你要监听的数据项
        //           属性值：一个函数，当这要监听的数据项变化时，要执行的函数。
        //                 它会自动传入新值和旧值
        //                 正常使用this
        //         属性名1: function(新值，旧值) {
        //             // 你要做什么.....
        //         },
        //         属性名2: function(新值，旧值) {
        //             // 你要做什么.....
        //         }
        //     }
        // })
        const vm = new Vue({
            el: '#app',
            data: {
                key: 'a',
                name: 'ak'
            },
            // 如果希望在key变化时，去做一些特殊的处理（发ajax,记录值.....）
            // 可以添加一个侦听器，对key进行侦听
            watch: {
                // 使用箭头，就不能通过this来访问vue实例了。
                key (newVal,oldVal) {
                    console.log(Date.now(), newVal, oldVal)
                    // 正常使用this
                    console.log(this.key, this.name)
                },
                name (newVal,oldVal) {
                    console.log(Date.now(), newVal, oldVal)
                    // 正常使用this
                    console.log(this.key, this.name)
                }
            }
        })
    </script>
</body>
</html>